<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>分配</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style type="text/css">

    table {
        text-align: center;
        width: 100%;
    }
</style>
<body>
<input type="text" hidden="hidden" name="breadcrumbs" id="breadcrumbs" />
<h1 style="text-align: center">面板PANEL</h1>
<div class="container">

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">代码片段样式展示</h4>
                </div>
                <div class="modal-body" id="model">
<!--                    <label for="name">用户名称</label>-->
<!--                    <input type="text" class="form-control" id="name"-->
<!--                           placeholder="请输入姓名">-->
<!--                    <label for="name">性别</label>-->
<!--                    <select class="form-control" id ="gender">-->
<!--                        <option>男</option>-->
<!--                        <option>女</option>-->
<!--                    </select>-->
<!--                    <label for="name">年龄</label>-->
<!--                    <input type="text" class="form-control" id="age"-->
<!--                           placeholder="请输入年龄">-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="row" >
        <div class="col-xs-12 col-sm-6" >
            <h2 style="text-align: center">Html模板展示</h2>
            <table class="table table-striped" style="background-color: #e0c6c6">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>编号</td>
                    <td>示例</td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="htm,iterStat:${htmList}">
                    <td th:text="${iterStat.count}"></td>
                    <td th:text="${htm.id}"></td>
                    <td>
                        <button th:htmId="${htm.id}" class="btn btn-default" data-toggle="modal" data-target="#myModal" style="margin-bottom: 20px" onclick="htm(this)">查看示例</button>
                        <script>
                            function htm(obj){
                                let htmId = obj.getAttribute("htmId");
                                $.ajax({
                                    data:JSON.stringify({
                                        id: htmId
                                    }),
                                    url: "/view/htmById",
                                    dataType: 'json',
                                    contentType: "application/json",
                                    type:"POST",
                                    async:true,
                                    cache:false,
                                    success: function (data) {

                                        console.log(JSON.stringify(data));
                                        var dh = '';
                                        if (data == null){
                                            console.log("用户未定义")
                                        }else{
                                            dh += data.htmlExcerpt;
                                        }
                                        document.getElementById('model').innerHTML=dh;
                                    },
                                    error: function () {
                                        alert('登录超时,请重新登录');
                                    }
                                });
                            }
                        </script>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-12 col-sm-6">
            <h2 style="text-align: center">用户效果</h2>
            <table class="table table-striped">
                <thead>
                <tr>
                    <td><label>用户编号</label></td>
                    <td>
                        <select class="form-control" id ="gender" style="width: 300px;margin: auto" >
                        <option>61511f2a5f30da6918c4db17</option>
                        <option>61511fdc5f30da6918c4db18</option>
                        </select>
                    </td>
                    <td>
                        <button type="button" class="btn btn-default" onclick="htmModel(this)">样式预览</button>
                    </td>
                </tr>
                </thead>
            </table>
            <div data-spy="scroll" data-target="#navbar-example" data-offset="0"
                 style="height:450px;overflow:auto; position: relative;" id="userModel">
                <script>
                    function htmModel(obj){
                        var gender = document.getElementById("gender").value;
                        $.ajax({
                            data:JSON.stringify({
                                userId: gender
                            }),
                            url: "/view/userHtmById",
                            dataType: 'json',
                            contentType: "application/json",
                            type:"POST",
                            async:true,
                            cache:false,
                            success: function (data) {
                                console.log(JSON.stringify(data));

                                var htmlExcerpt = data.htmlExcerpt.replace("${first}",data.breadcrumbs.first)

                                // var jsona={a:1,b:2,c:3};
                                // var keycount=0;
                                // for (var item in jsona){
                                //     keycount++;
                                // }
                                // alert (keycount)

                                var dh = '';
                                if (data == null){
                                }else{
                                    dh += htmlExcerpt;
                                }
                                document.getElementById('userModel').innerHTML=dh;

                            },
                            error: function () {
                                alert('登录超时,请重新登录');
                            }
                        });
                    }
                </script>

            </div>

<!--        <table class="table table-striped">-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <td>序号</td>-->
<!--                <td>用户编号</td>-->
<!--                <td>姓名</td>-->
<!--                <td>年龄</td>-->
<!--                <td>性别</td>-->
<!--                <td>职位标签</td>-->
<!--                <td>操作</td>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            <tr th:each="user,iterStat:${viewList}">-->
<!--                <td th:text="${iterStat.count}"></td>-->
<!--                <td th:text="${user.id}"></td>-->
<!--                <td th:text="${user.name}"></td>-->
<!--                <td th:text="${user.age}"></td>-->
<!--                <td th:text="${user.gender}"></td>-->
<!--                <td th:text="${user.label}"></td>-->
<!--                <td>-->
<!--                <a style="cursor: pointer" th:userId="${user.id}" th:userLabel="${user.label}"-->
<!--                   onclick="editLabel(this)">编辑</a>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </tbody>-->
<!--        </table>-->
        </div>


        <div class="clearfix visible-xs"></div>

    </div>
</div>
</body>

<script>
    function saveLabel() {

        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var age = document.getElementById("age").value;

        $.ajax({
            url:"/User/addUser",
            data:JSON.stringify({
                name: name,
                gender:gender,
                age:age
            }),
            dataType: 'json',
            contentType: "application/json",
            type:"POST",
            async:true,
            cache:false,
            success:function (result) {
                location.href = "/view/userView";
            }
        })
    }
    
    function editLabel(obj) {
        let userId = obj.getAttribute("userId");
        let userLabel = obj.getAttribute("userLabel");
        let userLabels = window.prompt("请输入新的表达式:", userLabel);
        if (userLabels === null || userLabels === '') {
            return;
        }


        console.log("用户编号"+userId+";新标签"+userLabels);

        $.ajax({
            traditional: true,
            type:"POST",
            url:"/User/update",
            data: {
                id:userId,
                label:userLabels
            },
            dataType: "json",
            contentType: "application/json",
            success:function(data){}
        });
    }



    $.ajax({
        type: "get",
        url: "/view/model1",
        async: true,
        dataType: "json",
        success: function (data) {

            console.log(JSON.stringify(data));
            var dh = '';
            if (data == null){
            }else{
                dh += '<span style="color: black;padding-top: 25px;float: right;padding-right: 50px">欢迎11111111<a href="/logout" style="color: orange">&nbsp;退出</a></span>';
            }
            document.getElementById('model1').innerHTML=dh;
        },
        error: function () {
            alert('登录超时,请重新登录');
        }
    });

</script>
</html>